<template>
  <cover-view class="main-fixbtn" v-if="showSerive">
    <cover-view class="main-fixbtn-btns main-fixbtn-btns2" @tap="makeCall">
      <cover-image class="main-fixbtn-btns-img" src="https://static.youliao.com/static/image/www_m/main/customer_service.png"></cover-image>
      <cover-view class="main-fixbtn-btns-text">客服</cover-view>
    </cover-view>
  </cover-view>
</template>

<script>
import { mapState } from "vuex";
import memberApi from "@/api/member";

export default {
  props: {
    // 展示购物车入口
    type: {
      type: String,
      default: ""
    },
    cId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      showSerive: false // 是否显示客服
    };
  },
  mounted() {
    console.log(`customerChat====${this.cId}`, this.type);
    this.getShowSerive();
  },
  methods: {
    // 获取客服
    async getShowSerive() {
      const res = await memberApi.getJiaxinSessionInfo({
        type: this.type,
        id: this.cId
      });
      if (res.status === 1) {
        this.showSerive = true;
      }
    },
    makeCall() {
      const url = `/pages-customer/jinxin/customSerive?type=${this.type}&id=${this.cId}`;
      uni.navigateTo({ url });
    }
  },
  watch: {
    cId() {
      !this.showSerive && this.getShowSerive();
    }
  }
};
</script>
<style lang="scss">
.main-fixbtn {
  position: fixed;
  z-index: 21;
  bottom: 142rpx;
  right: 20rpx;
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容IOS<11.2 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容IOS>11.2 */
  &-btns {
    width: 96rpx;
    height: 96rpx;
    // @extend .bg-cff;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0px 2px 8px 0px rgba(10, 20, 42, 0.15);
    @extend .flex-center;
    @extend .c-c24;
    @extend .font-size-10;
    flex-direction: column;
    &-img {
      width: 40rpx;
      height: 40rpx;
    }
    &-text {
      display: inline-block;
      color: #f0780e;
    }
  }
  &-btns1 {
    @extend .mb-8;
  }
}
</style>
